<%--
  Created by IntelliJ IDEA.
  User: 14364
  Date: 2022/12/3
  Time: 11:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/bootstrap-5.1.3-dist/css/bootstrap.css">
    <script type="text/javascript" src="../static/bootstrap-5.1.3-dist/js/bootstrap.js"></script>
    <title>首页</title>
</head>
<style>

    *{
        padding: 0;
        margin: 0;
        /* 字体 */
        font-family: sans-serif;
    }

    .container{
        /* 相对定位 */
        /*position: relative;*/
        /* 背景颜色· */
        /*background: #aad5f6;*/
        max-width: 100%;
    }

    .slide-1{
        background: url('/static/img/1.jpg');
    }
    .slide-2{
        background: url('/static/img/2.jpg');
    }
    .slide-3{
        background: url('/static/img/3.jpg');
    }

    .slide{
        width: 100%;
        height: 855px;
        /* 图像铺满整个背景区域, */
        background-size: cover;
        background-position: center;
        /* 相对定位 */
        position: relative;
        overflow-x: hidden ;
    }

    .caption{
        background:rgba(0, 0, 0, 0.03) ;
        width: 100%;
        /* 绝对定位 */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        /*padding: 40px 0px;*/
    }

    .login{
        position: absolute;
        top: 150%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    .container h3{
        color: #fff;
        text-align: center;
        font-size: 50px;
        /*padding: 18px;*/
    }

    .container p{
        /*max-width: 600px;*/
        /*width: 90%;*/
        margin: 0 auto;
        color: #ccc;
        text-align: center;
        font-size: 18px;
        line-height: 1.5em;
    }

    .arrow {
        /* 绝对定位 */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 100;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        transform: background 500ms;
    }

    .arrow img{
        width: 50px;
    }

    .arrow:hover{
        background:rgba(0, 0, 0, 0.4) ;
    }

    .l{
        left: 10px;
    }
    .r{
        right: 10px;
    }


</style>
<body>

<%--<nav class="navbar navbar-expand-lg bg-body-tertiary">--%>
<%--        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">--%>
<%--            <div class="navbar-nav">--%>
<%--                <a type="button" class="btn btn-light" href="#" style="margin-right: 30px">登录</a>--%>
<%--                <a type="button" class="btn btn-light" href="#">注册</a>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>
<%--</nav>--%>

<!--轮播图-->
<div class="container">
    <div class="arrow l" onclick="prev()">
        <img src="/static/img/l.png" alt="" />
    </div>
    <div class="slide slide-1">
        <div class="caption">
            <h3>让他们陪伴你，享受幸福的生活</h3>
            <p>爱实现梦想，打造宠物文化</p>
            <div class="login">
                <a type="button" class="btn btn-light" href="${pageContext.request.contextPath}/login.jsp" style="margin-right: 50px">登录</a>
                <a type="button" class="btn btn-light" href="${pageContext.request.contextPath}/register.jsp">注册</a>
            </div>

        </div>
    </div>
    <div class="slide slide-2">
        <div class="caption">
            <h3>爱你的家，爱你的宠物，爱你的梦想</h3>
            <p>用爱为你的宠物建造一个梦想之家</p>
            <div class="login">
                <a type="button" class="btn btn-light" href="${pageContext.request.contextPath}/login.jsp" style="margin-right: 50px">登录</a>
                <a type="button" class="btn btn-light" href="${pageContext.request.contextPath}/register.jsp">注册</a>
            </div>
        </div>
    </div>
    <div class="slide slide-3">
        <div class="caption">
            <h3>梦想宠物，带给你无限快乐</h3>
            <p>可爱的宠物，爱宠物的梦想</p>
            <div class="login">
                <a type="button" class="btn btn-light" href="${pageContext.request.contextPath}/login.jsp" style="margin-right: 50px">登录</a>
                <a type="button" class="btn btn-light" href="${pageContext.request.contextPath}/register.jsp">注册</a>
            </div>
        </div>
    </div>
    <div class="arrow r" onclick="next()">
        <img src="/static/img/r.png" alt="">
    </div>
</div>


<script>
    let slide = document.querySelectorAll('.slide');
    var current = 0;




    function cls() {
        for (let i = 0; i < slide.length; i++) {
            slide[i].style.display = 'none';
        }
    }



    function next() {
        cls();
        if (current === slide.length - 1) current = -1
        current++;

        slide[current].style.display = 'block';
        slide[current].style.opacity = 0.4;

        var x = 0.4;
        var intX = setInterval(function () {
            x += 0.1;
            slide[current].style.opacity = x;
            if (x >= 1) {
                clearInterval(intX);
                x = 0.4;
            }
        }, 100)
    }

    function prev() {
        cls();
        if (current === 0) current = slide.length
        current--;

        slide[current].style.display = 'block';
        slide[current].style.opacity = 0.4;

        var x = 0.4;
        var intX = setInterval(function () {
            x += 0.1;
            slide[current].style.opacity = x;
            if (x >= 1) {
                clearInterval(intX);
                x = 0.4;
            }
        }, 100)
    }

    function start() {
        cls();
        slide[current].style.display = 'block';
    }

    start();

</script>


</body>
</html>

